<template>
    <view class="room-container">
        <!-- 状态区域开始 -->
        <view class="status-wrap">
            <view class="wait-box">已通知医生尽快接诊,24小时内医生未回复将自动退款</view>
            <!-- <view class="chat-box">
                <text>咨询中</text>
                <text>剩余时间：12:32:34</text>
            </view>
            <view class="end-box">
                <text class="iconfont icon-xuanzhong"></text>
                <text>已结束</text>
            </view> -->
        </view>
        <!-- 状态区域结束 -->

        <!-- 操作区域开始 -->
         <view class="action-wrap">
            <view class="action-box">

                <!-- 输入框 -->
                <view class="input-panel">
                    <uni-easyinput
                        v-model="params.content"
                        focus
                        primaryColor="#27BA9B"
                        placeholder="问医生">
                    </uni-easyinput>
                </view>

                <!-- 上传图片 -->
                <view class="picker-panel">
                    <uni-file-picker
                        limit="1" 
                        :del-icon="false" 
                        disable-preview 
                        :imageStyles="imageStyles"
                        file-mediatype="image"
                        @select="hanleUploadImage"
                    >
                        <text class="iconfont icon-tupian"></text>
                    </uni-file-picker>
                </view>
                <button class="btn-panel" @click="handleSendMessage">发送</button>
            </view>
         </view>
        <!-- 操作区域结束 -->

        <view class="content-wrap">
            <!-- 患者消息区域开始 -->
             <view class="content-panel">
                <view class="title">
                    <view class="top">张三 男 29岁</view>
                    <view class="bottom">一周内 | 未去医院就诊</view>
                </view>

                <view class="content">
                    <view class="item">
                        <view class="key">病情描述</view>
                        <view class="value">头痛、头晕、恶性</view>
                    </view>

                    <view class="item">
                        <view class="key">图片</view>
                        <view class="value">点击查看</view>
                    </view>
                </view>


             </view>
            <!-- 患者消息区域结束 -->

            <!-- 通知区域开始 -->
            <view class="message-panel">
                <view class="content">
                    <text>医护人员正在赶在，请耐心等候</text>
                </view>
            </view>
            <!-- 通知区域结束 -->

            <!-- 提示区域开始 -->
            <view class="tips-panel">
                <view class="content">
                    <text>温馨提示：</text>
                    <text>在线咨询不能代替面诊，医护人员建议仅供参考</text>
                </view>
            </view>
            <!-- 提示区域结束 -->


            <!-- 订单提示区域开始 -->
            <view class="tips-panel order-panel">
                <view class="content">
                    <text style="color: #fff;">订单已取消</text>
                </view>
            </view>
            <!-- 订单提示区域结束 -->

            <!-- 处方区域开始 -->
             <view class="recipe-wrap">
                <view class="head-box">
                    <view class="title-panel">
                        <view class="left">电子处方</view>
                        <view class="right">
                            <text>原始处方</text>
                            <text class="iconfont icon-youjiantou"></text>
                        </view>
                    </view>

                    <view class="text-panel">
                        <view>张三 男 29岁 血管性头痛</view>
                        <view>开房时间：2032-10-23 11:23:34</view>
                    </view>
                </view>
                <view class="body-box">
                    <view class="item" v-for="(item, index) in 3" :key="index">
                        <view class="title-panel">
                            <view>有阿斯顿发违法</view>
                            <view>x1</view>
                        </view>
                        <view>口服，每次1袋，每天3次，用药3天</view>
                    </view>
                </view>
                <view class="foot-box">
                    <view class=""></view>
                </view>
             </view>
            <!-- 处方区域结束 -->

            <!-- 发消息区域开始 -->
             <view class="msg-to-wrap">
                <view class="avatar-box">
                    <image
                        src="@/static/images/avatar.png"
                        mode="scaleToFill"
                    />
                </view>
                <view class="content-box">
                    <view class="time">20:12</view>
                    <image
                        :src="global.FILE_DOMAIN + 'trident/hopsital/2024-11-09/2UZtAZNishUqfLi5UZeSEtRl0qZAImBUwiqHvQaG.jpg'"
                        mode="scaleToFill"
                    />
                </view>
             </view>
            <!-- 发消息区域结束 -->

            <!-- 发消息区域开始 -->
            <view class="msg-to-wrap">
                <view class="avatar-box">
                    <image
                        src="@/static/images/avatar.png"
                        mode="scaleToFill"
                    />
                </view>
                <view class="content-box">
                    <view class="time">20:12</view>
                    <view class="msg-panel">是的发顺丰吴青峰阿发我</view>
                </view>
             </view>
            <!-- 发消息区域结束 -->


            <!-- 接收消息区域开始 -->
            <view class="msg-from-wrap">
                <view class="content-from-box">
                    <view class="content-from-panel">
                        <view class="time">20:12</view>
                        <image
                            :src="global.FILE_DOMAIN + 'trident/hopsital/2024-11-09/2UZtAZNishUqfLi5UZeSEtRl0qZAImBUwiqHvQaG.jpg'"
                            mode="scaleToFill"
                        />
                    </view>
                </view>

                <view class="avatar-from-box">
                    <image
                        src="@/static/images/avatar.png"
                        mode="scaleToFill"
                    />
                </view>
             </view>
            <!-- 接收消息区域结束 -->

            <!-- 接收消息区域开始 -->
            <view class="msg-from-wrap">
                <view class="content-from-box">
                    <view class="content-from-panel">
                        <view class="time">20:12</view>
                        <view class="msg-panel">UR额同样的深V想法哇哦</view>
                    </view>
                </view>

                <view class="avatar-from-box">
                    <image
                        src="@/static/images/avatar.png"
                        mode="scaleToFill"
                    />
                </view>
             </view>
            <!-- 接收消息区域结束 -->

            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
        </view>
    </view>
</template>

<script lang="ts" setup>
import { inject, ref, reactive, onUnmounted, getCurrentInstance } from "vue"
import { reqSendMessageAPI } from "@/apis/inquiryRoom"
import type { SendMessageParams } from "@/types/inquiryRoom"
import { useUserStore } from "@/stores"
import { onLoad, onShow } from "@dcloudio/uni-app"
// import VueSocketIO from "vue-socket.io"
import io from 'socket.io-client'


// 全局属性
const global: any = inject('global')

// 用户存储
const userStore = useUserStore()

// 发送消息参数
const params = reactive<SendMessageParams>({
    from_uid: userStore.profile.user.uid,
    to_uid: 0,
    message: '',
    image_url: '',
})

// const socket:any = ref(null)

onLoad(() => {
    // ---------------- SocketIO方式 ---------------
    // const io = require('socket.io')();
    // console.log(io);
    
    const option = {
        transports: [
            'websocket',
            // 'polling'
        ], // 指定传输方式，如WebSocket
        autoConnect: true, // 是否自动连接
        reconnection: true, // 是否自动重新连接
        reconnectionAttempts: 3, // 重新连接尝试次数
        reconnectionDelay: 1000, // 重新连接延迟时间（毫秒）
        // query: { token: 'your-token' }, // 自定义查询参数
        // 其他可选参数...
    }
    const socket = io('http://127.0.0.1:3120', option);
    // const socket:any = io('ws://127.0.0.1:3120', option);
    // const socket:any = io('http://127.0.0.1:3120');
    console.log(socket);
    socket.on('connect', function() {
        console.log('connection success');
    })
})

onUnmounted(() => {
    console.log('onUnmounted');
    // socket.value.close();
    // socket.value.io.disconnect();
    // socket.value.io.on('disconnect', function() {
    //     console.log('disconnect success');
    // })
})




// ----------------- 上传图片功能开始 -----------------
// 上传图片样式
const imageStyles = ref(
	{
		width: 50,
		height: 50,
        border:{ // 如果为 Boolean 值，可以控制边框显示与否
            color:"#27BA9B",		// 边框颜色
            width:"1px",		// 边框宽度
            style:"solid", 	// 边框样式
            radius:"50%" 		// 边框圆角，支持百分比
        }
	}
)

// 处理上传图片
const hanleUploadImage = (e: any) => {
    console.log(e);
    
	// imageSrc.value = e.tempFilePaths[0]
}
// ----------------- 上传图片功能结束 -----------------



// ----------------- 发送消息功能开始 -----------------
const handleSendMessage = async () => {
    await reqSendMessageAPI(params)
    params.content = ''
}
// ----------------- 发送消息功能结束 -----------------
</script>

<style scoped lang="scss">
.room-container {
    padding-top: 100rpx;
    padding-bottom: 120rpx;
    min-height: 100vh;
    box-sizing: border-box;
    background-color: #effaf7;
    // 状态区域开始
    .status-wrap {
        position: fixed;
        left: 0;
        /* #ifdef MP-WEIXIN */
        top: 0;
        /* #endif */
        /* #ifndef MP-WEIXIN */
        top: 80rpx;
        /* #endif */
        height: 88rpx;
        width: 100%;
        background-color: #fff;
        font-size: 26rpx;
        z-index: 1;
        .wait-box {
            padding: 0 30rpx;
            height: 100%;
            line-height: 88rpx;
            text-align: center;
            background-color: #deefeb;
            color: $main-color;
        }
        .chat-box {
            display: flex;
            justify-content: space-between;
            padding: 30rpx;
            
            text {
                &:first-child {
                    color: $main-color;
                }
            }
        }
        .end-box {
            padding: 30rpx;
            .iconfont {
                margin-right: 10rpx;
            }
        }
    }
    // 状态区域结束

    // 操作区域开始
    .action-wrap {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 120rpx;
        background-color: #fff;
        z-index: 100;
        .action-box {
            width: 100%;
            height: 120rpx;
            display: flex;
            align-items: center;
            padding: 0 30rpx;
            .input-panel {
                flex: 1;
                padding-right: 10rpx;
            }
            .picker-panel {
                padding-right: 10rpx;
                .iconfont {
                    font-size: 60rpx;
                    color: #27BA9B;
                }
            }

            .btn-panel {
                line-height: 70rpx;
                height: 70rpx;
                width: 120rpx;
            }
        }
    }
    // 操作区域结束

    .content-wrap {
        padding: 20rpx;
        .content-panel {
            background-color: #fff;
            border-radius: 20rpx;
            padding: 35rpx 25rpx;
            .title {
                padding-bottom: 20rpx;
                border-bottom: 2rpx solid #F0F0F0;
                .top {
                    font-size: 32rpx;
                }
                .bottom {
                    font-size: 26rpx;
                    color: gainsboro;
                    padding-top: 5rpx;
                }
            }
            .content {
                padding-top: 20rpx;
                .item {
                    display: flex;
                    padding-bottom: 20rpx;
                    &:last-child {
                        padding-bottom: 0;
                    }
                    .key {
                        width: 160rpx;
                    }
                    .value {
                        font-size: 26rpx;
                        color: gainsboro;
                    }
                }
            }
        }

        // 通知区域
        .message-panel {
            margin: 0 auto;
            margin-top: 40rpx;
            background-color: #fff;
            padding: 10rpx 0;

            border-radius: 40rpx;
            width: 80%;
            display: flex;
            align-items: center;
            justify-content: center;
            .content {
                color: gainsboro;
                font-size: 24rpx;
                padding: 0 20rpx;
            }
        }

        // 提示区域
        .tips-panel {
            margin: 0 auto;
            margin-top: 40rpx;
            background-color: #fff;
            padding: 10rpx 0;

            border-radius: 40rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            .content {
                padding: 0 20rpx;
                color: gainsboro;
                font-size: 24rpx;
                text {
                    &:first-child {
                        color: #27BA9B;
                    }
                }
            }
        }
        .order-panel {
            background-color: rgb(221, 221, 221);
            width: 30%;
        }

        // 处方区域
        .recipe-wrap {
            margin: 0 auto;
            margin-top: 40rpx;
            background-color: #fff;
            padding: 20rpx 30rpx;

            border-radius: 10rpx;
            .head-box {
                border-bottom: 2rpx solid #F0F0F0;
                padding-bottom: 30rpx;
                .title-panel {
                    display: flex;
                    justify-content: space-between;
                    .left {
                        font-weight: bold;
                    }
                    .right {
                        font-size: 24rpx;
                        color: gainsboro;
                        .iconfont {
                            font-size: 22rpx;
                        }
                    }
                }

                .text-panel {
                    padding-top: 20rpx;
                    font-size: 24rpx;
                    color: gainsboro;
                }
            }

            .body-box {
                padding-top: 30rpx;
                .item {
                    padding-bottom: 25rpx;
                    font-size: 24rpx;
                    color: gainsboro;
                    .title-panel {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        font-weight: 600;
                        color: #000;
                        padding-bottom: 10rpx;
                    }
                }
            }
        }

        // 发消息区域开始
        .msg-to-wrap {
            margin: 80rpx 0;
            display: flex;
            .avatar-box {
                margin-right: 10rpx;
                image {
                    width: 60rpx;
                    height: 60rpx;
                }
            }
            .content-box {
                .time {
                    color: gainsboro;
                    font-size: 24rpx;
                    padding-bottom: 10rpx;
                }
                image {
                    width: 200rpx;
                    height: 200rpx;
                    border-radius: 10rpx;
                }

                .msg-panel {
                    background-color: #fff;
                    padding: 20rpx;
                }
            }
        }
        // 发消息区域结束

        // 接收消息区域开始
        .msg-from-wrap {
            margin: 80rpx 0;
            display: flex;
            justify-content: flex-end;
            .content-from-box {
                display: flex;
                justify-content: flex-end;
                .content-from-panel {
                    .time {
                        display: flex;
                        justify-content: flex-end;
                        color: gainsboro;
                        font-size: 24rpx;
                        padding-bottom: 10rpx;
                    }

                    image {
                        width: 200rpx;
                        height: 200rpx;
                        border-radius: 10rpx;
                    }

                    .msg-panel {
                        background-color: #fff;
                        padding: 20rpx;
                    }
                }
            }
            .avatar-from-box {
                margin-left: 10rpx;
                image {
                    width: 60rpx;
                    height: 60rpx;
                }
            }
        }
        // 接收消息区域结束
    }
}
</style>